<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>匀速运动停止</title>
   <style>
   #div1{
     width:100px;height:100px;background:red;position:absolute;left:600px;top:50px;
   }
   #div2{width:1px;height:300px;position:absolute;left:300px;top:0;background:black;}
   </style>
   <script>
     var timer=null;
     function startMove(iTarget){
	    var oDiv=document.getElementById("div1");
		clearInterval(timer);
	    timer=setInterval(function(){
		   var speed=0;
           if(oDiv.offsetLeft<iTarget){
		      speed=7;
		   }else{
		      speed=-7;
		   }		   
		   //speed=speed>0?Math.ceil(speed):Math.floor(speed);
		  if(Math.abs(iTarget-oDiv.offsetLeft)<=7){
		  //if((iTarget-oDiv.offsetLeft)<=7){
		  //if(iTarget==oDiv.offsetLeft){
		     clearInterval(timer);
			 oDiv.style.left=iTarget+"px";
		   }else{
		   oDiv.style.left=oDiv.offsetLeft+speed+"px";
		 //  document.title=oDiv.offsetLeft+','+speed;
		  }
		},30);
	 }
   </script>
</head>
<body>
   <input type="button" value="到100" onclick="startMove(100)">
   <input type="button" value="到300" onclick="startMove(300)">
   <div id="div1"></div>
   <div id="div2"></div>

</body>
</html>